<template>
    <div>
        <Row :gutter="10">
            <Col>
                <Card>
                    <Row class="live_wrapper clearfix">
                        <Input v-model="filter.name" @on-search="search" search enter-button="查询" placeholder="请输入表单类型名称"
                               style="width:290px; margin-right: 10px;float: right;top:0;font-size: 14px;"/>
                    </Row>
                    <Row class="margin-top-10 table_pattern table_pattern2">
                        <Table :loading="loading" :columns="columns" :data="list"></Table>
                    </Row>
                    <Row class="margin-top-10">
                        <Page :total="pagenation.totalPage" :page-size="pagenation.perPage"
                              :current="pagenation.currentPage" show-elevator show-total @on-change="change"></Page>
                    </Row>
                </Card>
            </Col>
        </Row>
        <Modal v-model="edit" title="编辑表单类型" width="900px" :mask-closable="false" class="goods_modal" :z-index='100'>
            <Form :model="formValidate" ref="formValidate" :label-width="120">
                <FormItem label="表单类型介绍" prop="content" class="label_required">
                    <Input v-model="formValidate.content" type="textarea" :rows="4" placeholder="请输入表单类型介绍" style="width:610px;"/>
                </FormItem>
                <FormItem label="表单类型案例" class="label_required">
                    <NEditor v-if="!spinShow" :msg="formValidate.desc" @changeMsg="changeMsg" style="width:85%;"></NEditor>
                </FormItem>
                <FormItem>
                    <Button :loading="saving" type="primary" @click="handleSubmit" style="width: 90px;height: 35px;border-radius: 0;font-size: 14px;">提交</Button>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
    import config from '@/config'
    import { formTypeList, editFormType} from '@/api/main'
    export default {
        data() {
            return {
                spinShow: false,
                pagenation: {},
                columns: [
                    {
                        key: 'name',
                        title: '名称',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong', params.row.name)
                        },
                    },
                    {
                        key: 'code',
                        title: '类型code',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong', params.row.code)
                        },
                    },
                    {
                        key: 'content',
                        title: '文本介绍',
                        align: 'center',
                        render: (h, params) => {
                            return h('strong', params.row.content)
                        },
                    },
                    {
                        title: '操作',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                              h(
                                  'Button',
                                  {
                                      style: {
                                          marginBottom: '5px',
                                          marginRight: '5px',
                                          border:0,
                                          background:'transparent',
                                          fontSize:'14px',
                                          color:'#377EEF'
                                      },
                                      on: {
                                          click: () => {
                                            this.editFormType(params.row)
                                          },
                                      },
                                  },
                                  '编辑',
                              )
                            ])
                        },
                    },
                ],
                edit: false,
                list: [],
                loading: true,
                saving: false,
                formValidate: {
                    id: 0,
                    content: '',
                    desc: ''
                },
                filter: {
                    page: 0,
                    name: ''
                },
            }
        },
        methods: {
            change: function(page) {
                this.loading = true
                this.filter.page = page-1
                this.init()
            },
            search: function () {
                this.filter.page = 0
                this.init()
            },
            changeMsg (msg) {
                this.formValidate.desc = msg
            },
            editFormType: function(obj){
                this.spinShow = true
                this.formValidate.id = obj.id
                this.formValidate.content = obj.content
                if (obj.desc) {
                  this.formValidate.desc = obj.desc
                } else {
                  this.formValidate.desc = ''
                }
                this.edit = true
                setTimeout(() => {
                    this.spinShow = false
                }, 1)
            },
            handleSubmit() {
                if (this.formValidate.content == '') {
                    this.$Message.error("请输入表单类型文本介绍");return;
                }
                if (this.formValidate.desc == '') {
                    this.$Message.error("请输入表单类型案例富文本");return;
                }
                //console.log(this.formValidate);return;
                editFormType(this.formValidate).then(res => {
                    if (res.code === 0) {
                      this.$Message.success('操作成功')
                      this.edit = false
                      this.init()
                    } else {
                        this.$Message.error(res.text)
                    }
                })
            },
            init () {
                formTypeList(this.filter).then(res => {
                    if (res.code == 0) {
                        this.list = res.data
                        this.loading = false
                        this.pagenation.currentPage = parseInt(res.currentPage) + 1
                        this.pagenation.totalPage = parseInt(res.totalPage)
                        this.pagenation.perPage = parseInt(res.perPage)
                    }
                })
            }
        },
        mounted() {
            this.init();
        }
    }
</script>
